<template>
  <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 p-6">
    <div class="flex justify-between items-center mb-4">
      <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ title }}</h3>
      <div v-if="loading" class="flex space-x-2">
        <div class="w-2 h-2 bg-blue-600 rounded-full animate-bounce"></div>
        <div class="w-2 h-2 bg-blue-600 rounded-full animate-bounce" style="animation-delay: 0.1s"></div>
        <div class="w-2 h-2 bg-blue-600 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
      </div>
    </div>
    
    <!-- 图表容器 -->
    <div class="h-64 relative">
      <canvas ref="chartCanvas"></canvas>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, nextTick } from 'vue'
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  BarElement,
  Title,
  Tooltip,
  Legend,
  ArcElement
} from 'chart.js'
import { Chart } from 'vue-chartjs'

// 注册 Chart.js 组件
ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  BarElement,
  Title,
  Tooltip,
  Legend,
  ArcElement
)

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  loading: {
    type: Boolean,
    default: false
  },
  chartData: {
    type: Object,
    default: () => ({
      labels: [],
      datasets: []
    })
  },
  chartOptions: {
    type: Object,
    default: () => ({})
  },
  type: {
    type: String,
    default: 'line',
    validator: (value) => ['line', 'bar', 'doughnut', 'pie'].includes(value)
  }
})

const chartCanvas = ref(null)
const chartInstance = ref(null)

// 默认配置
const defaultOptions = {
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    legend: {
      position: 'top',
      labels: {
        color: '#6B7280',
        font: {
          size: 12
        }
      }
    },
    tooltip: {
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      titleColor: '#ffffff',
      bodyColor: '#ffffff',
      borderColor: '#374151',
      borderWidth: 1,
      cornerRadius: 8,
      displayColors: true
    }
  },
  scales: {
    x: {
      grid: {
        color: 'rgba(107, 114, 128, 0.1)'
      },
      ticks: {
        color: '#6B7280'
      }
    },
    y: {
      grid: {
        color: 'rgba(107, 114, 128, 0.1)'
      },
      ticks: {
        color: '#6B7280'
      }
    }
  }
}

// 深色模式配置
const darkModeOptions = {
  plugins: {
    legend: {
      labels: {
        color: '#D1D5DB'
      }
    }
  },
  scales: {
    x: {
      grid: {
        color: 'rgba(209, 213, 219, 0.1)'
      },
      ticks: {
        color: '#D1D5DB'
      }
    },
    y: {
      grid: {
        color: 'rgba(209, 213, 219, 0.1)'
      },
      ticks: {
        color: '#D1D5DB'
      }
    }
  }
}

// 创建图表
const createChart = async () => {
  if (!chartCanvas.value) return

  await nextTick()

  const ctx = chartCanvas.value.getContext('2d')
  const isDark = document.documentElement.classList.contains('dark')
  
  const finalOptions = {
    ...defaultOptions,
    ...(isDark ? darkModeOptions : {}),
    ...props.chartOptions
  }

  if (chartInstance.value) {
    chartInstance.value.destroy()
  }

  chartInstance.value = new ChartJS(ctx, {
    type: props.type,
    data: props.chartData,
    options: finalOptions
  })
}

// 监听数据变化
watch(() => props.chartData, () => {
  if (chartInstance.value) {
    chartInstance.value.data = props.chartData
    chartInstance.value.update('active')
  }
}, { deep: true })

// 监听主题变化
watch(() => document.documentElement.classList.contains('dark'), () => {
  createChart()
})

onMounted(() => {
  createChart()
})
</script>

<style scoped>
@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

.animate-bounce {
  animation: bounce 1s infinite;
}
</style>